<template>
  <div v-if="props.mode !== 'selector'">软件类型管理</div>

  <!-- 查询表单的部分 -->
  <div>
    <NForm inline>
      <NFormItem>
        <NInput v-model:value="queryInfo.tname" placeholder="软件类型名称"></NInput>
      </NFormItem>
      <NFormItem>
        <NButtonGroup>
          <NButton :loading="loading" type="error" @click="reset">重置</NButton>
          <NButton :loading="loading" type="primary" @click="requery">查询</NButton>
        </NButtonGroup>
      </NFormItem>
      <NFormItem>
        <NButton type="info" @click="showAdd">添加</NButton>
      </NFormItem>
    </NForm>
  </div>

  <!-- 数据表格 -->
  <div>
    <NDataTable :loading="loading" :data="list" :columns="columns" @chang="query"></NDataTable>
  </div>

  <!-- 分页信息 -->
  <div>
    <NFlex justify="center"
      ><NPagination
        v-model:page="page.pageNumber"
        :page-size="page.pageSize"
        :item-count="page.total"
        @update-page="query"
      ></NPagination
    ></NFlex>
  </div>

  <!-- 添加的对话框 -->
  <NModal @after-leave="requery" v-model:show="avisible" preset="dialog" title="添加">
    <div>
      <NForm>
        <NFormItem>
          <NInput v-model:value="addInfo.tname" placeholder="软件类型名称"></NInput>
        </NFormItem>
        <NInput type="textarea" v-model:value="addInfo.intro" placeholder="软件类型简介"></NInput>
        <NFormItem>
          <NDatePicker
            :is-date-disabled="dateValidate"
            value-format="yyyy-MM-dd"
            v-model:formatted-value="dateinfo"
          ></NDatePicker>
        </NFormItem>
      </NForm>
    </div>
    <template #action>
      <NButton :loading="loading" type="primary" @click="add">确定</NButton>
      <NButton :loading="loading" type="warning" @click="restAdd">重置</NButton>
      <NButton type="error" @click="avisible = false">关闭</NButton>
    </template>
  </NModal>

  <!-- 修改的对话框 -->
  <NModal @after-leave="requery" v-model:show="mvisible" preset="dialog" title="修改">
    <div>
      <NForm>
        <NFormItem>
          <NInput v-model:value="modifyInfo.tname" placeholder="软件类型名称"></NInput>
        </NFormItem>
        <NInput
          type="textarea"
          v-model:value="modifyInfo.intro"
          placeholder="软件类型简介"
        ></NInput>
      </NForm>
    </div>
    <template #action>
      <NButton :loading="loading" type="primary" @click="modify">保存</NButton>
      <NButton type="error" @click="mvisible = false">关闭</NButton>
    </template>
  </NModal>
</template>

<script setup lang="ts">
import { ref, h, onMounted } from 'vue'
import {
  useMessage,
  NDataTable,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NButtonGroup,
  NModal,
  NDatePicker,
  NPagination,
  NFlex,
  NSpace,
  useDialog,
} from 'naive-ui'
import type { DataTableColumn } from 'naive-ui'
import type { BaseDataResult, BaseResult, PageBean, PageVo } from '@/types/BaseResult'
import type { TbSoftwareType } from '@/types/crud'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
const message = useMessage()
const dialog = useDialog()

// 定义属性 mode有两种，一种是标准crud，一种是选择数据
const props = defineProps(['mode'])
const emits = defineEmits(['info-selected'])

const loading = ref(false)
const dateinfo = ref(Tools.formatDate(new Date(), 'yyyy-MM-dd'))

const dateValidate = (ts: number) => {
  return new Date().getTime() <= ts
}

// #region: 选择数据的部分
const infoSelected = (info: TbSoftwareType) => {
  emits('info-selected', info)
}
// endregion

// #region: 数据查询

const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const list = ref([] as Array<TbSoftwareType>)
const queryInfo = ref({ tname: '' })

const selectedColumns: DataTableColumn<TbSoftwareType>[] = [
  { title: '类型名称', key: 'tname' },
  {
    title: '选择',
    render: (row) => {
      return h(NButton, { type: 'info', size: 'small', onClick: () => infoSelected(row) }, '选择')
    },
  },
] as DataTableColumn<TbSoftwareType>[]

let columns: DataTableColumn<TbSoftwareType>[] = [
  { title: '编号', key: 'stid' },
  { title: '软件分类', key: 'tname' },
  { title: '简介', key: 'intro' },
  {
    title: '操作',
    key: 'action',
    render: (row) => {
      return h(NSpace, {}, [
        h(NButton, { type: 'info', size: 'small', onClick: () => showModify(row) }, '修改'),
        h(NButton, { type: 'error', size: 'small', onClick: () => showDelete(row) }, '删除'),
      ])
    },
  },
] as DataTableColumn<TbSoftwareType>[]

const query = () => {
  loading.value = true
  Api.get(
    `/crud/softwaretype/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data: BaseDataResult<PageVo<TbSoftwareType>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

const requery = () => {
  queryInfo.value = { tname: '' }
  query()
}

const reset = () => {
  queryInfo.value = { tname: '' }
  query()
}

onMounted(() => {
  if (props.mode === 'selector') columns = selectedColumns
  query()
})
// #endregion

// #region: 添加
const avisible = ref(false)
const addInfo = ref({} as TbSoftwareType)

const showAdd = () => {
  restAdd()
  avisible.value = true
}

const restAdd = () => {
  addInfo.value = { tname: '', intro: '' } as TbSoftwareType
  dateinfo.value = Tools.formatDate(new Date(), 'yyyy-MM-dd')
}
const add = () => {
  loading.value = true
  Api.post('/crud/softwaretype', addInfo.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      message.success('添加成功')
      restAdd()
      return
    }
    message.error(data.message)
  })
}
// #endregion

// #region: 修改
const modifyInfo = ref({} as TbSoftwareType)
const mvisible = ref(false)

const showModify = (info: TbSoftwareType) => {
  modifyInfo.value = Tools.concatJson(info) as TbSoftwareType
  mvisible.value = true
}
const modify = () => {
  loading.value = true
  Api.put('/crud/softwaretype', modifyInfo.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      message.success('修改成功')
      mvisible.value = false
      return
    }
    message.error(data.message)
  })
}
// #endregion

// #region: 删除
const showDelete = (info: TbSoftwareType) => {
  dialog.warning({
    title: '警告',
    content: '确定删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      loading.value = true
      Api.delete(`/crud/softwaretype/${info.stid}`, {}, (data: BaseResult) => {
        if (data.success) {
          message.success('删除成功')
          query()
          return
        }
        message.error(data.message)
      })
    },
  })
}
// #endregion
</script>
<style scoped></style>
